<template>
  <ga-modal v-model:visible="visible" :width="810" @close="handleCancel(formRef)">
    <template #title>应用策略</template>
    <ga-spin style="width: 100%" :loading="loading">
      <ShadowBox title="置放群组基本信息" :headerBottom="false">
        <template #main_info>
          <div class="vm_info">
            <div class="flex_between_aligncenter">
              <p>名称</p>
              <p>类型</p>
              <p>存量云主机</p>
            </div>
            <div class="flex_between_aligncenter">
              <p>{{ "fcsdfdsfdsfds" }}</p>
              <p>{{ "反亲和" }}</p>
              <p>{{ 22 }}个</p>
            </div>
          </div>
        </template>
      </ShadowBox>
      <BorderBox
        title="规格信息"
        :wrapperStyle="{
          marginTop: '8px',
        }"
        :styleText="{ padding: '0 8px 8px' }"
      >
        <template #main_info>
          <ga-table
            style="margin-top: 8px"
            size="small"
            :scroll="{ y: 200 }"
            row-key="id"
            :pagination="false"
            :columns="columns"
            :data="tableData"
            :bordered="false"
            :hoverable="false"
          />
        </template>
      </BorderBox>
    </ga-spin>
    <template #footer>
      <ga-button @click="visible = false">取消</ga-button>
      <ga-button type="primary" @click="handleOk" :loading="okLoading"> 确定 </ga-button>
    </template>
  </ga-modal>
</template>
<script setup>
import { ref, h, reactive } from "vue";
import { createSnapshot } from "@/api/vm";
import { getComputingSolutionList } from "@/api/computingSolution";
import useLoading from "@/hooks/loading";
import LinkText from "@/components/LinkText/index.vue";

const { loading, setLoading } = useLoading(false);
const okLoading = ref(false);
const visible = ref(false);
const current = ref("");
const selectedId = ref([]);
const open = async (record) => {
  visible.value = true;
  setLoading(true);
  current.value = record;
  fetchData();
};
// 获取计算方案列表
const tableData = ref([]);
const fetchData = async () => {
  setLoading(true);
  try {
    const { data } = await getComputingSolutionList({ limit: -1 });
    tableData.value = data.items;
  } finally {
    setLoading(false);
  }
};
const columns = [
  {
    title: "云主机名称",
    dataIndex: "name",
  },
  {
    title: "IP地址",
    dataIndex: "memory",
  },
  {
    title: "当前宿主机",
    dataIndex: "host",
    render: ({ record }) => h(LinkText, { label: record?.name, desc: record?.name }),
  },
  {
    title: "目标宿主机",
    dataIndex: "host",
    render: ({ record }) =>
      h(LinkText, { label: record?.name, desc: record?.name, to: record?.name }),
  },
];
// 保存
const emits = defineEmits(["fetchData"]);
const handleOk = async () => {
  console.log("selectedId", selectedId.value);

  // if (!res) {
  okLoading.value = true;
  // try {
  //   const obj = formatVpcCreateParams(type, formData, tableData.value);
  //   const { code } = await createSnapshot(obj, "network-vpc");
  //   if (code === 20000) Message.success("操作成功");
  //   emits("fetchData");
  //   visible.value = false;
  // } finally {
  //   okLoading.value = true;
  // }
  // }
};
const handleCancel = () => {
  current.value = "";
  selectedId.value = [];
  tableData.value = [];
};
defineExpose({ open });
</script>
<style lang="scss" scoped></style>
